<nz-modal [(nzVisible)]="isVisible" [nzMaskClosable]="false" [nzTitle]="configuration.id ? '全局系统配置参数' : '新增配置参数'"
  (nzOnCancel)="handleCancel()" [nzFooter]="detailFooter" nzWidth="400">

  <form nz-form [formGroup]="validateForm" #configurationForm="ngForm">
    <nz-form-item>
      <nz-form-label nzRequired [nzSpan]="6" nzFor="code">配置名称</nz-form-label>
      <nz-form-control [nzSpan]="14" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="nameErrorTpl">
        <input nz-input formControlName="name" [(ngModel)]="configuration.name" placeholder="配置名称必填"
          *ngIf="!isPreView; else nameTemp">
        <ng-template #nameErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            请输入配置名称!
          </ng-container>
          <ng-container *ngIf="control.hasError('duplicated')">
            该配置名称已存在!
          </ng-container>
          <ng-container *ngIf="control.hasError('blank')">
            不可输入空格!
          </ng-container>
        </ng-template>
        <ng-template #nameTemp>
          <div class="editable-cell">
            <div class="editable-cell-value-wrap text-truncate">
              {{ configuration?.name }}
            </div>
          </div>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzRequired [nzSpan]="6" nzFor="value">配置值</nz-form-label>
      <nz-form-control [nzSpan]="14" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="valueErrorTpl">
        <input nz-input formControlName="value" [(ngModel)]="configuration.value" placeholder="配置值必填"
          *ngIf="!isPreView; else valueTemp">
        <ng-template #valueErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            请输入配置值!
          </ng-container>
          <ng-container *ngIf="control.hasError('blank')">
            不可输入空格!
          </ng-container>
        </ng-template>
        <ng-template #valueTemp>
          <div class="editable-cell">
            <div class="editable-cell-value-wrap text-truncate">
              {{ configuration?.value }}
            </div>
          </div>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="available" nzRequired [nzSpan]="6">是否可用</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <label nz-checkbox formControlName="available" [(ngModel)]="configuration.available"
          [nzDisabled]="isPreView">可用</label>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="showOrder" nzRequired [nzSpan]="6">显示顺序</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <nz-input-number [(ngModel)]="configuration.showOrder" [nzMin]="0" [nzStep]="1" formControlName="showOrder"
          *ngIf="!isPreView; else showOrderTemp">
        </nz-input-number>
        <ng-template #showOrderTemp>
          <div class="editable-cell">
            <div class="editable-cell-value-wrap text-truncate">
              {{ configuration?.showOrder }}
            </div>
          </div>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="remark" [nzSpan]="6">备注</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <textarea nz-input rows="3" autocomplete="off" [(ngModel)]="configuration.remark" formControlName="remark"
          placeholder="备注选填" *ngIf="!isPreView; else remarkTemp"></textarea>
        <ng-template #remarkTemp>
          <div class="editable-cell">
            <div class="editable-cell-value-wrap text-truncate">
              {{ configuration?.remark }}
            </div>
          </div>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
  </form>

  <ng-template #detailFooter>
    <button nz-button nzType="primary" (click)="save()" *ngIf="!isPreView" [nzLoading]="loading">
      <span>保存</span>
    </button>
    <button nz-button nzType="default" (click)="handleCancel()">关闭</button>
  </ng-template>
</nz-modal>
